<template>
  <el-container>
    <el-row><common-head child-name="添加品类"></common-head></el-row>

    <el-main>

      <el-card class="box-card" shadow="hover" body-style="width: 250px">
        <div class="text item">
        <el-form v-model="category" class="demo-form-inline" style="text-align: left">
        <el-form-item style="font-size: medium; font-weight: bold" label="品类名称：">
          <el-input v-model="category.categoryName" placeholder="品类名称"></el-input>
        </el-form-item>

        <el-form-item style="font-size: medium; font-weight: bold" label="品类顺序：">
          <el-input-number v-model="category.categoryOrder" size="small"
                           controls-position="right" :min="1" :max="10"></el-input-number>
        </el-form-item>

        <el-form-item style="font-size: medium; font-weight: bold" label="子品类：">
          <el-input v-model="category.subcategory" placeholder="子品类"></el-input>
        </el-form-item>

        <el-form-item style="font-size: medium; font-weight: bold" label="品类描述：">
          <el-input size="medium" type="textarea" :rows="2" placeholder="请输入内容" v-model="category.categoryDescription"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="save">保存</el-button>
          <el-button type="primary" plain:true @click="cancel">取消</el-button>
        </el-form-item>

        </el-form>
        </div>
      </el-card>
    </el-main>
  </el-container>
</template>

<script>
    import commonHead from "../../system/common/commonHead";

    export default {
        name: "addCategory",
        components: {commonHead},

        data(){
          return {
            category: {
              categoryName: '',
              categoryOrder: '',
              subcategory: '',
              categoryDescription: '',
            },
          }
        },

      methods: {

        //保存添加信息
        save(){
          this.axios.post("micro-mall-server/category/add", this.category).then(res => {
            console.log(res.data);
            if(res.data.code === 200){
              //成功信息提示
              this.$message({
                type: 'success',
                message: '操作成功',
              });
              //清空表单
              this.category = {};
              //跳转，应设计时间间隔
              this.$router.push({
                path: 'category_management'
              })
            }else {
              //失败提示
              this.$message({
                type: 'error',
                message: '操作失败!',
              });
            }
          })
        },

        //取消
        cancel(){
          console.log("cancel");
          //取消则直接回到品类管理页面
          this.$router.push({
            path: 'category_management'
          })
        }
      }
    }
</script>

<style scoped>
  .box-card{
    position: absolute;
    top: 40%;
  }
</style>
